<template>
  <div class="hd pd20" style="background-color: white">
    <div class="datebox">
      <ul class="datelist">
        <li v-for="(value,index) in datelist" :class="{activedate: activenum === index}" @click="seldate(index)">
          <span>{{value.day}}</span>
          <span>{{value.zhou}}</span>
        </li>
      </ul>
    </div>
    <div class="flex flex_between mt20">
      <div class="morning">
        <p class="datelist_title">
          <span>上午</span>
        </p>
        <div>
          <div v-for="(value,index) in morninglist">
            <ul class="listul">
              <li style="width:80px;"><font color="#9F310F">{{value.name}}</font></li>
              <li style="width:40px">{{value.age}}岁</li>
              <li style="width:30px">{{value.sex}}</li>
              <li style="width:130px">等待叫号：<font color="#9F310F">{{value.num}}号</font></li>
              <li style="width:130px">上午{{value.time}}</li>
              <li style="width:100px">
                <font color="#9F310F">已完结</font>
              </li>
            </ul>
          </div>
        </div>
      </div>
      <div class="afternoon">
        <p class="datelist_title">
          <span>下午</span>
        </p>
        <div>
          <div v-for="(value,index) in morninglist">
            <ul class="listul">
              <li style="width:80px;"><font color="#9F310F">{{value.name}}</font></li>
              <li style="width:40px">{{value.age}}岁</li>
              <li style="width:30px">{{value.sex}}</li>
              <li style="width:130px">等待叫号：<font color="#9F310F">{{value.num}}号</font></li>
              <li style="width:130px">上午{{value.time}}</li>
              <li style="width:100px">
                <font color="#9F310F">已完结</font>
              </li>
            </ul>
          </div>
        </div>
      </div>
    </div>
  </div>
</template>

<script>
  export default {
    data () {
      return {
        datelist: [
          {day: '7.10', zhou: '周一'},
          {day: '7.10', zhou: '周一'},
          {day: '7.10', zhou: '周一'},
          {day: '7.10', zhou: '周一'},
          {day: '7.10', zhou: '周一'},
          {day: '7.10', zhou: '周一'},
          {day: '7.10', zhou: '周一'}
        ],
        activenum: 0,
        morninglist: [
          {name: '张三张', age: '25', sex: '男', num: '1', time: '9:00-9:30'},
          {name: '张三张', age: '25', sex: '男', num: '1', time: '9:00-9:30'},
          {name: '张三张', age: '25', sex: '男', num: '1', time: '9:00-9:30'},
          {name: '张三张', age: '25', sex: '男', num: '1', time: '9:00-9:30'},
          {name: '张三张', age: '25', sex: '男', num: '1', time: '9:00-9:30'}
        ]
      }
    },
    mounted () {

    },
    methods: {
      seldate (index) {
        this.activenum = index
      },
      tomeet (index, row) {
        console.log(index)
        console.log(JSON.stringify(row))
      }
    }
  }
</script>

<style>
  .datebox{
    background-color: #F8E6CE;
    border-radius: 10px 10px 0 0;
    border-bottom:1px solid #E8DCD0;
  }
  .datelist{
    display:flex;
    justify-content: space-around;
    border-bottom:1px solid #C4A481;
    padding:8px 0;
  }
  .datelist>li{
    display:flex;
    flex-direction: column;
    align-items: center;
    color:#55504C;
    font-weight:600;
    cursor: pointer;
  }
  .activedate{
    color:#9F310F!important;
  }
  .datelist_title{
    background-color: #FFF5EC;
    border-bottom:1px solid #F9EFEB;
    padding:8px 20px;
  }
  .morning,.afternoon{
    border:1px solid #F9EFEB;
  }
  .el-table .cell{
    padding:0 10px;
  }
  .listul{
    display:flex;
    height:40px;
    line-height: 40px;
    text-align: center;
  }
  .listul>li{
    border-bottom:1px solid #F9EFEB;
  }

</style>
